/**
 * @desc 歌词滚动的整体实现
 */
(function () {
  'use strict';
  /**
   * @desc 处理歌词数据,字符串转化成对象
   * @param { String }  lrc
   * @returns {Array<object>} 返回值为[object,object,object]
   */
  function parseLrcs(lrc) {
    const result = [];
    const lines = lrc.split('\n');

    for (let i = 0; i < lines.length; i++) {
      const line = lines[i];
      const parseLrc = line.split(']');
      const lrcObj = {};
      lrcObj.time = parseTime(parseLrc[0].substring(1));
      lrcObj.words = parseLrc[1];

      result.push(lrcObj);
    }
    return result;
  }

  /**
   * @desc 创建 li标签 插入到元素中形成列表
   */
  function createElement() {
    let frag = document.createDocumentFragment();
    for (let i = 0, len = parseLrcData.length; i < len; i++) {
      const li = document.createElement('li');
      li.textContent = parseLrcData[i].words;
      frag.appendChild(li);
    }
    doms.ul.appendChild(frag);
  }

  /**
   * @desc 时间字符串转化成数值
   * @param { String }  字符串
   * @returns { Number } 计算过后的Number
   */
  function parseTime(time) {
    const timeArr = time.split(':');
    return +timeArr[0] * 60 + +timeArr[1];
  }

  /**
   * @desc 通过对比找到当前时间所在的区间索引
   * @param { Number } currTime 当前播放的时间
   * @returns { Number } 当前时间对应歌词数据的索引位置
   */
  function findCurrentIndex(currTime) {
    for (let i = 0; i < parseLrcData.length; i++) {
      const element = parseLrcData[i];
      if (currTime < element.time) {
        return i - 1;
      }
    }
    return parseLrcData.length - 1;
  }

  /**
   * @desc 设置偏移量
   */
  function setOffset(index) {
    let offset = index * liHeight + liHeight / 2 - containerHeight / 2;
    let maxOffset = doms.ul.clientHeight - containerHeight;

    if (offset < 0) {
      offset = 0;
    }

    if (offset >= maxOffset) {
      offset = maxOffset;
    }
    doms.ul.style.transform = `translateY(-${offset}px)`;

    let li = doms.ul.querySelector('.active');
    if (li) {
      li.classList.remove('active');
    }
    li = doms.ul.children[index];
    if (li) {
      li.classList.add('active');
    }
  }

  // get need operate domain
  const doms = {
    lrcContainer: document.querySelector('.lrc-container'),
    ul: document.querySelector('.lrc-container ul'),
    audio: document.querySelector('audio'),
    clickBtn: document.querySelector('.play-ico'),
  };

  const parseLrcData = parseLrcs(lrc1); // 处理过后的歌词数据

  createElement(); //create element appended to parent node

  const liHeight = doms.ul.children[0].clientHeight;
  const containerHeight = doms.lrcContainer.clientHeight;
  doms.audio.addEventListener('timeupdate', function (event) {
    const currentTime = event.target.currentTime;
    const currIndex = findCurrentIndex(currentTime);
    setOffset(currIndex);
  });

  doms.clickBtn.addEventListener('click', function () {
    let paused = doms.audio.paused;
    if (paused) {
      doms.audio.play();
      doms.clickBtn.classList.remove('stop');
      doms.clickBtn.classList.add('on');
    } else {
      doms.audio.pause();
      doms.clickBtn.classList.add('stop');
      doms.clickBtn.classList.remove('on');
    }
  });
})();
